import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import Slider from 'react-slick';
import { Rate, Button } from 'antd';
import Problem from '../problem/index';
import Problem2 from '../problem/index2';
import WeServe from '../weServe/index';
import style from './index.module.less';
import doctor from '@/style/imgs/homePage/1_op.png';
import doctor1 from '@/style/imgs/homePage/doctor1.png';
import doctor2 from '@/style/imgs/homePage/doctor2.png';
import doctor3 from '@/style/imgs/homePage/doctor3_2.png';
import doctor4 from '@/style/imgs/homePage/doctor4.png';
import tab1 from '@/style/imgs/homePage/zhaoyishenghuotuanduixiezuo.svg';
import tab2 from '@/style/imgs/homePage/chenggong.svg';
import tab3 from '@/style/imgs/homePage/tounao.svg';
import { getFavorableDataList } from '../../api/publishCase';

const HomePage = (props: any) => {
    const [statisNum, setStatisNum] = useState<any>([
        {
            img: tab1,
            num: '8000',
            suffix: '位',
            title: '服务医疗行业用户超',
        },
        {
            img: tab2,
            num: '10000',
            suffix: '+',
            title: '文章润色后成功接收超',
        },
        {
            img: tab3,
            num: '2000',
            suffix: '家',
            title: '深入研究期刊超',
        },
    ]);
    const evaluateSettings = {
        // dots: false,
        // // className: "center",
        // // centerMode: true,
        // // infinite: true,
        // // centerPadding: "60px",
        // slidesToShow: 3,
        // // speed: 6000,
        // // autoplay: false,
        // // autoplaySpeed: 6000,
        // // cssEase: "linear"
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 3,
    };
    const [evaluateList, setEvaluateList] = useState<any>([]);
    useEffect(() => {
        getEvaluateList();
    }, []);
    async function getEvaluateList() {
        const res: any = await getFavorableDataList({
            pageNo: 1,
            pageSize: 10,
        });
        const newList = res.data.list.map((item: any) => {
            return {
                ...item,
                start: 5,
            };
        });
        setEvaluateList(newList);
    }
    const [editList, setEditList] = useState<any>([
        {
            img: doctor4,
            name: 'Aaliyah',
            num: '2500+',
            start: '99.8%',
            academic: '哈佛医学院生物医学博士学位',
            desc: '临床医学、分子生物学、细胞生物学',
        },
        {
            img: doctor3,
            name: 'Adonis',
            num: '2000+',
            start: '99.2%',
            academic: '哈佛医学院生物医学博士学位',
            desc: '神经学、糖尿病与内分泌学',
        },
        {
            img: doctor2,
            name: 'Dana',
            num: '2000＋',
            start: '97.6%',
            academic: '哈佛医学院生物医学博士学位',
            desc: '儿科、妇产科、生殖学、外科',
        },
        {
            img: doctor1,
            name: 'Jolene',
            num: '1600+',
            start: '98%',
            academic: '哈佛医学院生物医学博士学位',
            desc: '心血管科学、肿瘤免疫学、遗传学、内科',
        },
    ]);
    const handleLink = (url: string) => {
        props.history.push(url);
    };
    return (
        <>
            {/* 轮播图 */}
            <div className="switchItem1">
                <div className="content">
                    <div className="desc">
                        <div className={`h2 strong`}>万方寰宇</div>
                        <div className={`h2 strong`}>全方位、科研学术服务“领跑者”</div>
                        <div className={`h1 strong`}>多年英文润色经验，专为医学领域服务</div>
                        <div className={`h3 strong`}>专注、务实、一对一，诚恳、守信、求共赢</div>
                    </div>
                    <div className="banner_img">
                        <img src={doctor} alt="图片加载失败" />
                    </div>
                </div>
            </div>
            <div className={style.container}>
                {/* 统计数量 */}
                <div className={`${style.total} ${style.center}`}>
                    {statisNum.map((item: any, index: number) => (
                        <div key={index} className={style.totalItem}>
                            <img
                                src={item.img}
                                alt="图片加载失败"
                                className={`${style.total_img} ${
                                    index === 1 ? style.small_img : ''
                                }`}
                            />
                            <div>
                                <div className={style.num}>
                                    <span>{item.num}</span>
                                    <span>{item.suffix}</span>
                                </div>
                                <div className={style.title}>{item.title}</div>
                            </div>
                        </div>
                    ))}
                </div>
                {/* 我们的服务 */}
                <WeServe />
                {/* 双重编辑 */}
                <div className={style.doubleEdit}>
                    <div className={`h2 ${style.serve_title}`}>双重编辑 保驾护航</div>
                    <div className={`h3 ${style.h3}`}>资深中文医学编辑，完成稿件中英转译</div>
                    <div className={`h3 ${style.h3}`}>
                        权威英文母语编辑，精细审阅，完成母语化润色
                    </div>
                    <div className={style.edit_banner}>
                        {editList.map((item: any, index: number) => {
                            return (
                                <div className={style.edit_item} key={index}>
                                    <img
                                        src={item.img}
                                        alt="图片加载失败"
                                        className={`${index < 2 ? style.big_img : ''}`}
                                    />
                                    <div className="h3 strong">{item.name}</div>
                                    <div className={style.double_box}>
                                        <div className="h4">
                                            累计润色
                                            <span className="strong">{item.num}</span>
                                            论文
                                        </div>
                                        <div className="h4">
                                            好评率
                                            <span className="strong">{item.start}</span>
                                        </div>
                                    </div>
                                    <div className={style.desc}>
                                        <span className={`h4 strong white`}>大学学科：</span>
                                        {item.academic}
                                        <br />
                                        <span className={`h4 strong white`}>擅长领域：</span>
                                        {item.desc}
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                    <div className="block_footer">
                        <Button type="primary" onClick={() => handleLink('/app/editTeam/index')}>
                            点击查看示例
                        </Button>
                    </div>
                </div>

                {/* 客户评价 */}
                <div className={style.evaluate_body}>
                    <div className={`h2 ${style.evaluate_title}`}>真实用户好评</div>
                    <div className={`h3 ${style.h3}`}>
                        积极沟通、定制方案、成功发表，是我们的共同目标
                    </div>
                    <div className={`h3 ${style.h3}`}>
                        利他助他、与客户成为伙伴，是我们期待的最佳状态
                    </div>
                    <div className={`slider-container ${style.slider_container}`}>
                        <Slider {...evaluateSettings}>
                            {evaluateList.map((item: any, index: number) => (
                                <div className={style.evaluate_Slider_item} key={index}>
                                    <div className={style.evaluate_name}>{item.customInfo}</div>
                                    <div className={style.evaluate_scroll}>{item.hospital}</div>
                                    <div className={style.evaluate_start}>
                                        深度润色
                                        <Rate disabled defaultValue={item.start} />
                                    </div>
                                    <div className={style.evaluate_desc}>{item.commentContent}</div>
                                </div>
                            ))}
                        </Slider>
                    </div>
                </div>
                {/* 常见问题 */}
                {/* <Problem bgc="#fff" /> */}
                <Problem2 />
            </div>
        </>
    );
};

export default withRouter(HomePage);
